<template>
	<view id="myView">
		Test组件及其生命周期函数,数据{{num}}
		<text>这是父页面传递给该组件的数据{{title}}</text>
		<button @click="getNum">获取子组件中的值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 3,
				Interval: null
			};
		},
		props:['title'],
		methods: {
			getNum(){
				this.$emit('myEvent',this.num)
			}
		},
		beforeCreate() {
			console.log('组件实例开始初始化...','数据未挂载',this.num);
		},
		created() {		//常用于数据初始化
			console.log('组件实例创建...','数据初始化',this.num);
			this.Interval = setInterval(() => {
				console.log("组件在执行定时器...");
			},2000);
		},
		beforeMount() {
			var myview = document.getElementById('myView');
			console.log('组件数据挂载前...','页面未渲染',myview);
		},
		mounted() {		//常用于dom元素操作
			var myview = document.getElementById('myView');
			console.log('组件数据渲染完成...','页面已渲染',myview);
		},
		destroyed() {
			console.log('组件已销毁...');
			clearInterval(this.Interval);
		}
	}
</script>

<style>

</style>
